<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="chart-wrapper">
          最近6小时
          <line-chart :chart-data="chartDataObj" width="580px" height="305px" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { querySingleParam } from "@/api/basic/hisMain";
  import LineChart from '@/views/components/LineCharts'

  const chartDataObj = {
    xAxisData: [],//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    yAxis:{},
    legendData: [],//['aa', 'bb'],
    series:[]
  }

  export default {
    components: { LineChart },
    props: {
      pointParam: {
        type: Object
      },
      collectPoint: {
        type: Object
      },
      chartId:{
        type: String
      }
    },
    data() {
      return {
        chartDataObj: chartDataObj,
        paramName: this.pointParam.paramInfo.name,
        // 查询参数
        queryParams: {
          pointId:this.collectPoint.id,
          paramId:this.pointParam.paramId,
          params:{
            beginTime: undefined,
            endTime: undefined
          }
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    watch:{
      pointParam(val) {
        this.queryParams.paramId = this.pointParam.paramId;
        this.paramName = this.pointParam.paramInfo.name;
      },
      collectPoint(val) {
        this.queryParams.pointId = this.collectPoint.id;
        this.getList();
      }
    },
    computed: {
      tabHt(){
        return this.$store.state.app.tableHeight.htp
      }
    },
    created() {
      this.mounted();
      this.getList();
    },
    methods: {
      mounted() {
        let nowDate = new Date();
        let befDate = new Date(nowDate.getTime() + 1 * 24 * 3600 * 1000);
        let byear = befDate.getFullYear();
        let bmonth = befDate.getMonth() + 1;
        let bday = befDate.getDate();
        let endTime = `${byear}-${bmonth}-${bday}`;
        // 向前推迟一周的时间点
        befDate = new Date(nowDate.getTime() - 1 * 6 * 3600 * 1000);
        byear = befDate.getFullYear();
        bmonth = befDate.getMonth() + 1;
        bday = befDate.getDate();
        let startTime = `${byear}-${bmonth}-${bday}`;

        this.queryParams.params.beginTime = startTime;
        this.queryParams.params.endTime = endTime;
      },
      getList() {
        let _this=this
        _this.chartDataObj.xAxisData = []
        _this.chartDataObj.series = []
        _this.chartDataObj.legendData = []
        _this.chartDataObj.yAxis = {
          type: "value",
          position: "left",
          min:0,
          //splitNumber: 10, // Y 轴分隔格数
          splitLine: {
            // Y 轴分隔线样式
            show: true,
            lineStyle: {
              //color: ["#f3f0f0"],
              width: 2,
              type: "solid"
            }
          },
          scale: true
        }
        querySingleParam(this.queryParams).then(response => {
          let obj = response;

          _this.chartDataObj.xAxisData = obj.xAxisData;
          _this.chartDataObj.series.push({
            name: this.paramName,
            // smooth: true,
            type: 'line',
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                color: '#3888fa',
                lineStyle: {
                  color: '#3888fa',
                  width: 2
                },
                areaStyle: {
                  color: '#f3f8ff'
                }
              }
            },
            data: obj.valsData
          });
          // map.put("xAxisData", xAxisData);
          // map.put("valsData", valsData);
          _this.chartDataObj.legendData.push(this.paramName);
        });

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      }
    }
  };
</script>

